<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
          body{
background-color: #ededed
          }
          @media all and (min-width: 640px) {
    body,html,.wenwen-footer,.speak_window{width:640px!important;margin:0 auto}
    .speak_window,.wenwen-footer{left:50%!important;margin-left:-320px}
}
input,button{outline:none;}
.wenwen-footer{width:100%;position:fixed;bottom:-5px;left:0;background:#f6f6f6; border-top:solid 1px #ddd;box-sizing:border-box;}
.wenwen_btn,.wenwen_help{width:15%;text-align:center;}
.wenwen_btn img,.wenwen_help img{height:40px;}
.wenwen_text{height:40px;border-radius:5px;border:solid 1px #636162;box-sizing:border-box;width:66%;text-align:center;overflow:hidden;margin-left:2%;}
.circle-button{padding:0 5px;}
.wenwen_text .circle-button{font-size:14px;color:#666;line-height:38px;}
.write_box{background:#fff;width:100%;height:40px;line-height:40px;display:none;}
.write_box input{height:40px;padding:0 5px;line-height:40px;width:100%;box-sizing:border-box;border:0;}
.wenwen_help button{width:95%;background:#42929d;color:#fff;border-radius:5px;border:0;height:40px;display:none;}
#wenwen{height:100%;}
.speak_window{overflow-y:scroll;height:100%;width:100%;position:fixed;top:0;left:0;}
.speak_box{margin-bottom:70px;padding:10px; padding-top: 30px}
.question,.answer{margin-bottom:1rem;}
.question{text-align:right;}
.question>div{display:inline-block;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.heard_img{height:33px;width:33px;border-radius:5px;overflow:hidden;background:#ddd;}
.heard_img img{width:100%;height:100%}
.question_text,.answer_text{box-sizing:border-box;position:relative;display:table-cell;min-height:60px;}
.question_text{padding-right:15px;}
.answer_text{padding-left:15px;}
.question_text p,.answer_text p{border-radius:3px;padding-top:  6px; padding-left:7px;padding-right:  7px;padding-bottom:  6px;margin:0;font-size:16px;line-height:22px;box-sizing:border-box;vertical-align:middle;display:table-cell;
max-width:243px;word-wrap:break-word;
}
.answer_text p{background:#fff;}
.question_text p{background:#a9e97a;color:#000;text-align:left;}
.question_text i,.answer_text i{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;position:absolute;top:13px;}
.answer_text i{border-right:5px solid #fff;left:10px;}
.question_text i{border-left:5px solid #a9e97a;right:10px;}
.answer_text p a{color:#42929d;display:inline-block;}
audio{display:none;}
.saying{position:fixed;bottom:30%;left:50%;width:120px;margin-left:-60px;display:none;}
.saying img{width:100%;}
.write_list{position:absolute;left:0;width:100%;background:#fff;border-top:solid 1px #ddd;padding:5px;line-height:30px;}

.gzhimg{padding-top: 15px; padding-bottom: 15px;}
.sr{ padding-top: 10px;  background-color: #f6f6f6}
.input{background: #fff;   height: 35px; border-radius:5px; line-height: 35px}
.rightbnt{padding-top: 3px; margin-left: 10px}

.fl{float: left;}
.fs{ }
.fs button{background: #07c160; width: 50px; height: 30px; color: #fff; position: absolute;border-radius:3px; font-size: 13px; top: 13px;right: -110px}
.fr{float: right;}
.time{ line-height: 30px; text-align: center; font-size: 11px;color: #a0a0a0}
      </style>
  </head>
  <body style="background-color: #ededed">
    <div id="wrap">

<div class="time" id="time"></div>

      <div class="speak_window">
      	<div class="speak_box">
      		<div class="answer">
      			<div class="heard_img left"><img id="gzhtx"  class="imgCache"  srcs=""></div>
      			<div class="answer_text">
      				<p id="gzhf">   </p>
      				<i></i>
      			</div>
      		</div>
      	</div>
      </div>


      <div class="wenwen-footer"  >

        <div class="sr" id="footer">
    <div class="leftbnt fl"><img src="../image/gzhbnt1.png" height="40px" > </div>
    <div class="input fl" id="ip"><input type="txt" id="srk" ></div>

    <div class="rightbnt fl" id="rightbnt"><img src="../image/gzhrightbnt1.png" height="28px" ></div>
      <div class="rightbnt fl" id="rightbnt2"><img src="../image/gzhrightbnt2.png" height="28px" ></div>
    <div class="fs">  <button onclick="up_say()" id="fs" class="right">发送</button></div>
        </div>
        <div style="display:none">

      	<div class="wenwen_btn left" onclick="to_write()"><img src="./jQuery仿手机微信聊天界面代码_files/jp_btn.png"></div>
      	<div class="wenwen_text left">
      	    <div class="write_box">
      	        <input type="text" class="left" onkeyup="keyup()" placeholder="请输入关键字">
      	    </div>
      	    <div class="circle-button" id="wenwen">
      	        按住 说话
      	    </div>
      	</div>
      	<div class="wenwen_help right">

      	    <button onclick="up_say()" class="right">发送</button>
      	</div>
      	<div style="opacity:0;" class="clear"></div>
      </div>




    </div>

  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script  type="text/javascript"  src="../script/jquery-2.1.1.min.js"></script>
   <script  type="text/javascript"  src="../script/jquery.md5.js"></script>
  <script type="text/javascript">
  var w ;
  var w2 ;


  function sj( ){

    var day2 = new Date();
     day1 = new Date(day2.valueOf() );// 当前时间减掉1分钟
  day1.setTime(day1.getTime());
  if(day1.getMinutes()<10){
  minutes="0"+day1.getMinutes()
  }
  else {
   minutes= day1.getMinutes()
  }
  i=day1.getHours()
  //s2 = day2.getHours()+":" +minutes;

  if(i>=0 && i<6){
      s2= "凌晨"+i+":"+minutes;
  } else if(i>=6 && i<=12 ){
      s2= "上午"+i+":"+minutes;

    }else if(i>12 && i <=18){
      i=i-12;
       s2= "下午"+i+":"+minutes;
    }else if(i>18 && i<=23){
      i=i-12;
         s2= "晚上"+i+":"+minutes;
    }
    else  {
    s2= i+":"+minutes;

  }
      $api.html($api.byId('time'), s2);

  }

  	function to_write(){
  	    $('.wenwen_btn img').attr('src','images/yy_btn.png');
  	    $('.wenwen_btn').attr('onclick','to_say()');
  	    $('.write_box,.wenwen_help button').show();
  	    $('.circle-button,.wenwen_help a').hide();
  	    $('.write_box input').focus();
  	    for_bottom();
  	}

    function fasong(){

            // $api.css($api.byId('ip'),'width:'+(w-60)+'px;');
    }

    $("#srk").on('input',function(){
                    if(!($('#srk').val()=='')){
    $("#fs").animate({right:'10px'},'slow');
  //$("#rightbnt2").hide();
      $("#ip").animate({width: (w-13)+'px'},'slow');
      //  $api.css($api.byId('ip'),'width:'+(w-35)+'px;');
                    }else{
  $("#fs").animate({right:'-110px'},'fast');
  $("#ip").animate({width:w2+'px'},'slow');
      //  $("#rightbnt2").show();
        }
                })


  	function to_say(){
  		$('.write_list').remove();
  	    $('.wenwen_btn img').attr('src','images/jp_btn.png');
  	    $('.wenwen_btn').attr('onclick','to_write()');
  	    $('.write_box,.wenwen_help button').hide();
  	    $('.circle-button,.wenwen_help a').show();
  	}

  	function up_say(){
  		$('.write_list').remove();
  	     var text = $('#srk').val(),
  	        str  = '<div class="question">';
  	        str += '<div class="heard_img right"><img id="mytx"   src="'+mytx+'"></div>';
  	        str += '<div class="question_text clear"><p>'+text+'</p><i></i>';
  	        str += '</div></div>';

  	    if(text == ''){

  	        $('.write_box input').focus();
  	    }else{
  	        $('.speak_box').append(str);
  	        $('#srk').val('');
  	       $('#srk').focus();
           $("#fs").animate({right:'-110px'},'fast');
           $("#ip").animate({width:w2+'px'},'slow');
  	        autoWidth();
  	        for_bottom();
  	        setTimeout(function(){
  	            var ans  = '<div class="answer"><div class="heard_img left"><img src="'+gzhtx+'"></div>';
  	            	ans += '<div class="answer_text"><p>'+zdhf+'</p><i></i>';
  	        		ans += '</div></div>';
  	        	$('.speak_box').append(ans);
  				for_bottom();
  	        },1000);
  	    }
  	}

  	function keyup(){
  		var footer_height = $('.wenwen-footer').outerHeight(),
  			text = $('.write_box input').val(),
  			str = '<div class="write_list">'+text+'</div>';
  		if (text == '' || text == undefined){
  			$('.write_list').remove();
  		}else{
  			$('.wenwen-footer').append(str);
  			$('.write_list').css('bottom',footer_height);
  		}
  	}

  	var wen  = document.getElementById('wenwen');
  	function _touch_start(event){
          event.preventDefault();
          $('.wenwen_text').css('background','#c1c1c1');
          $('.wenwen_text span').css('color','#fff');
          $('.saying').show();
      }

      function _touch_end(event){
          event.preventDefault();
          $('.wenwen_text').css('background','#fff');
          $('.wenwen_text .circle-button').css('color','#666');
          $('.saying').hide();
          var str  = '<div class="question">';
  	        str += '<div class="heard_img right">'+gzhtx+'</div>';
  	        str += '<div class="question_text clear"><p>不好意思，我听不清！</p><i></i>';
  	        str += '</div></div>';
  		$('.speak_box').append(str);
  		for_bottom();
          setTimeout(function(){
          	var ans  = '<div class="answer"><div class="heard_img left"><img src="images/dglvyou.jpg"></div>';
  	        	ans += '<div class="answer_text"><p>我不知道你在说什么?</p><i></i>';
  	    		ans += '</div></div>';
  	    	$('.speak_box').append(ans);
  			for_bottom();
          },1000);
      }

      wen.addEventListener("touchstart", _touch_start, false);
      wen.addEventListener("touchend", _touch_end, false);

      function for_bottom(){
  		var speak_height = $('.speak_box').height();
  		$('.speak_box,.speak_window').animate({scrollTop:speak_height},500);
  	}

  	function autoWidth(){
  		$('.question_text').css('max-width',$('.question').width()-60);
  	}
  	autoWidth();
  </script>

  <script type="text/javascript">
  var gzhtx,zdhf,mytx;
      apiready = function(){
        var winHeight = api.winHeight;
               h=winHeight-50-api.safeArea.top- api.safeArea.bottom -56
               $api.css($api.byId('wrap'),'min-height:'+h+'px;');

      w = api.winWidth-190;
            w2 = api.winWidth-190;
               var footer = $api.byId('footer');
                 footer.style.paddingBottom = api.safeArea.bottom +"px" ;
            $api.css($api.byId('ip'),'width:'+w+'px;');


            api.ajax({
            url:localStorage.getItem('domain')+"/index.php/Home/Index/serach.html" ,
            method: 'get',

          },function(ret,err){

        //  console.log( JSON.stringify( ret.   ) );
gzhtx= localStorage.getItem('domain')+ret.task_list.tushi[0]   ;
mytx=localStorage.getItem('domain')+ret.web_logo.shou_account;
zdhf=ret.task_list.taskuser;
              $api.html($api.byId('gzhf'),  ret.task_list.info );
                $api.attr($api.byId('gzhtx'),'srcs' ,  ret.task_list.tushi[0] );
    $api.html($api.byId('time'), ret.task_list.sj);
                _zyzImgCache();
          })




      };
  </script>
  </html>
